<template>
  <div class="principle-container">
    <div class="header">
      <h1 class="title">原理教学</h1>
      <button class="back-button" @click="goBack">返回首页</button>
    </div>
    <el-container>
      <el-aside width="auto">
        <PrincipleSidebar
          @print-content="handlePrint"
          @favorite-content="handleFavorite"
          @search-content="handleSearch"
        />
      </el-aside>
      <el-main>
        <div class="content-area" v-if="activeContent">
          <router-view></router-view>
        </div>
        <div class="content-area" v-else>
          <div class="default-content">
            <div class="content-wrapper">
              <p>这里是原理教学的内容区域。</p>
              <p>请从左侧菜单选择一个主题开始学习。</p>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { computed, watch } from "vue";
import { usePrincipleMenuStore } from "@/store/principle";
import { useRoute, useRouter } from "vue-router";
import PrincipleSidebar from "@/components/pop_up/PrincipleSidebar.vue";

const router = useRouter();

// 返回首页
const goBack = () => {
  router.push("/home");
};

const principleStore = usePrincipleMenuStore();
const route = useRoute();

// 获取当前激活的菜单内容
const activeContent = computed(() => principleStore.activeContent);

// 监听路由变化，更新激活菜单
watch(
  () => route.path,
  (newPath) => {
    // 如果当前路径是原理教学相关的路径，则更新菜单激活状态
    if (newPath.startsWith("/principle")) {
      principleStore.setActiveMenu(newPath);
    }
  },
  { immediate: true }
);

// 生成面包屑导航项
const breadcrumbItems = computed(() => {
  const items = [];
  const activeId = principleStore.activeMenu;

  // 查找当前激活菜单的层级路径
  for (const category of principleStore.menuItems) {
    if (category.children) {
      for (const subItem of category.children) {
        if (subItem.children) {
          for (const child of subItem.children) {
            if (child.id === activeId) {
              items.push(category.title);
              items.push(subItem.title);
              items.push(child.title);
              return items;
            }
          }
        } else if (subItem.id === activeId) {
          items.push(category.title);
          items.push(subItem.title);
          return items;
        }
      }
    } else if (category.id === activeId) {
      items.push(category.title);
      return items;
    }
  }

  return items;
});

const handlePrint = (content) => {
  console.log("打印内容:", content);
  // 实现打印功能
};

const handleFavorite = (content) => {
  console.log("收藏内容:", content);
  // 实现收藏功能
};

const handleSearch = () => {
  console.log("搜索内容");
  // 实现搜索功能
};
</script>

<style scoped>
.principle-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-container {
  flex: 1;
  height: calc(100% - 60px);
}

.el-aside {
  height: 100%;
  background-color: #f8f9fa;
  border-right: 1px solid #e4e7ed;
}

.el-main {
  padding: 0;
  background-color: #ffffff;
  overflow-y: auto;
  height: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #22474f;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
}

.title {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.back-button {
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.content-area {
  margin: 0 auto;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.breadcrumb {
  margin-bottom: 20px;
}

.default-content h1 {
  color: #303133;
  margin-bottom: 20px;
}

.content-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 4px;
  flex: 1;
  overflow: auto;
  min-height: 0; /* 重要：允许内容滚动 */
}

.default-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>